<template>
  <div class="cont-box">
    <nav class="nav-box">
      <div
        class="nav-item"
        @click="changeColor(index)"
        v-for="(item, index) in list"
        :key="index"
        :class="currentIndex === index ? 'nav-item-active' : ''"
      >
        {{ item }}
        <div class="nav-select"></div>
      </div>
    </nav>
    <div class="content-box">
     <card-item/>
    </div>
  </div>
</template> 
<script>
import CardItem from "./CardItem.vue"
export default {
  components:{
    CardItem

  },
  data() {
    return {
      list: ["进行中", "待领取", "已完成"],
      currentIndex: 0,
      activeStyle: { color: "#FF00AA" },
    };
  },
  created() {},
  methods: {
    changeColor(index) {
      this.currentIndex = index;
    },
  },
};
</script>

<style scoped>
.nav-box {
  display: flex;
  justify-content: flex-start;
  height: 0.81rem;
  align-items: center;
}
.nav-item {
  font-size: 0.28rem;
  margin-left: 0.6rem;
  color: #60636d;
}
.nav-select {
  width: 0.48rem;
  height: 0.1rem;
  border-radius: 0.06rem;
  margin: 0.04rem auto 0 auto;
}
.nav-item-active {
  color: #ff00aa;
}
.nav-item-active .nav-select {
  background-color: #ff00aa;
}
</style>